<template>
  <div>
    <nav-bar :title="$t('myModel.personal')"></nav-bar>
    <div class="maxinBox" v-if="userInfo">
      <img :src="userInfo.headUrl" alt="">
      <van-cell title="姓名" :value="userInfo.name" />
      <van-cell title="性别" :value="userInfo.gender | sex" />
      <van-cell title="民族" :value="userInfo.nation" />
      <van-cell title="出生年月" :value="userInfo.birthday" />
      <van-cell title="身份证号" :value="userInfo.idCardNo" />
      <van-cell title="籍贯" :value="userInfo.place" />
      <van-cell title="婚姻状况" :value="userInfo.marriage | marriage" />
      <van-cell title="手机号码" :value="userInfo.mobile" />
      <van-cell title="紧急联系人" :value="userInfo.contact" />
      <van-cell title="紧急联系人电话" :value="userInfo.contactPhone" />
    </div>
  </div>
</template>

<script>
  import myAPI from '../../../api/myAPI.js'

  export default {
    data() {
      return {
        userInfo: null
      }
    },
    methods: {
      // 查询用户信息
      getUserInfo() {
        myAPI.getUserInfo().then(res => {
          this.userInfo = res
        })
      }
    },
    mounted() {
      this.getUserInfo()
    }
  }
</script>
<style scoped lang="scss">
  img{
    width: 100%;
  }
</style>
